/* 
    <img 
            v-if="hasBg"
            src="../../../images/sideMenu/sider-bg.png" alt="" class="zz-sider-bg">
            sider-toggle
*/
Vue.component("zz-side-bar", {
    template: `<div class="zz-sider" :id="'siderBar'+xh">
        
        <div class="ds-navList-wrap">
            <div class="ds-navList-template"></div>
        </div>

        <span class="zz-df zz-df-jc-c zz-df-ai-c zz-sider_toggle_btn" title="折叠菜单">
            <i class="el-icon-d-arrow-left"></i>
            <i class="el-icon-d-arrow-right"></i>
        </span>
    </div>`,
    props: {
        // 序号
        xh:{
            type:Number,
            default:0
        },
        // 菜单数据
        menuData:{
            type:Array,
            default(){
                return [];
            }
        },
        // 是否需要背景
        hasBg:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {

        };
    },
    mounted() {
        var vm = this;
        // 左侧导航
        var navData = [
            {
                title: "报表",
                iconSrc:"../../../images/sideMenu/icon1.png",
                url: "../aaa/aaa.html"
            },
            {
                title: "用户",
                iconSrc:"../../../images/sideMenu/icon2.png",
                url: "../bbb/bbb.html"
            },
            /* {
                title: "效能报表",
                iconSrc:"../../../images/sideMenu/icon3.png",
                url: "/index"
            },
            {
                title: "工作管理",
                iconSrc:"../../../images/sideMenu/icon3.png",
                children: [{
                        title: "工作任务",
                        route: "/work-manage-mission",
                        children: [{
                                title: "考勤历史",
                                route: "/fjAttend-history",
                                children: [{
                                        title: "考勤历史",
                                        route: "/fjAttend-history",
                                        children: [{
                                                title: "考勤历史",
                                                route: "/fjAttend-history1",
                                                children: [{
                                                        title: "考勤历史",
                                                        route: "/fjAttend-history2",
                                                        children: [{
                                                                title: "考勤历史",
                                                                route: "/fjAttend-history3"
                                                            },
                                                            {
                                                                title: "请假休假",
                                                                route: "/fjAttend-leave2"
                                                            },
                                                            {
                                                                title: "考勤申诉",
                                                                route: "/fjAttend-appeal"
                                                            },
                                                            {
                                                                title: "考勤配置",
                                                                route: "/fjAttend-configure"
                                                            },
                                                            {
                                                                title: "排班管理",
                                                                route: "/fjAttend-work-manage"
                                                            },
                                                            {
                                                                title: "请假休假",
                                                                route: "/fjAttend-leave2"
                                                            },
                                                            {
                                                                title: "考勤申诉",
                                                                route: "/fjAttend-appeal"
                                                            },
                                                            {
                                                                title: "考勤配置",
                                                                route: "/fjAttend-configure"
                                                            },
                                                            {
                                                                title: "排班管理",
                                                                route: "/fjAttend-work-manage"
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        title: "请假休假",
                                                        route: "/fjAttend-leave"
                                                    },
                                                    {
                                                        title: "考勤申诉",
                                                        route: "/fjAttend-appeal"
                                                    },
                                                    {
                                                        title: "考勤配置",
                                                        route: "/fjAttend-configure"
                                                    },
                                                    {
                                                        title: "排班管理",
                                                        route: "/fjAttend-work-manage"
                                                    }
                                                ]
                                            },
                                            {
                                                title: "请假休假",
                                                route: "/fjAttend-leave"
                                            },
                                            {
                                                title: "考勤申诉",
                                                route: "/fjAttend-appeal"
                                            },
                                            {
                                                title: "考勤配置",
                                                route: "/fjAttend-configure"
                                            },
                                            {
                                                title: "排班管理",
                                                route: "/fjAttend-work-manage"
                                            }
                                        ]
                                    },
                                    {
                                        title: "请假休假",
                                        route: "/fjAttend-leave"
                                    },
                                    {
                                        title: "考勤申诉",
                                        route: "/fjAttend-appeal"
                                    },
                                    {
                                        title: "考勤配置",
                                        route: "/fjAttend-configure"
                                    },
                                    {
                                        title: "排班管理",
                                        route: "/fjAttend-work-manage"
                                    }
                                ]
                            },
                            {
                                title: "请假休假",
                                route: "/fjAttend-leave"
                            },
                            {
                                title: "考勤申诉",
                                route: "/fjAttend-appeal"
                            },
                            {
                                title: "考勤配置",
                                route: "/fjAttend-configure"
                            },
                            {
                                title: "排班管理",
                                route: "/fjAttend-work-manage",
                                children: [{
                                        title: "考勤历史1",
                                        route: "/fjAttend-history"
                                    },
                                    {
                                        title: "请假休假1",
                                        route: "/fjAttend-leave"
                                    },
                                    {
                                        title: "考勤申诉1",
                                        route: "/fjAttend-appeal"
                                    },
                                    {
                                        title: "考勤配置1",
                                        route: "/fjAttend-configure"
                                    },
                                    {
                                        title: "排班管理1",
                                        route: "/fjAttend-work-manage"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        title: "信息采集",
                        route: "/fjWorkManage-info",
                        children: [{
                                title: "请假休假",
                                route: "/fjAttend-leave",
                                children: [{
                                        title: "请假休假",
                                        route: "/fjAttend-leave"
                                    },
                                    {
                                        title: "考勤申诉",
                                        route: "/fjAttend-appeal"
                                    },
                                    {
                                        title: "考勤配置",
                                        route: "/fjAttend-configure"
                                    },
                                    {
                                        title: "排班管理",
                                        route: "/fjAttend-work-manage"
                                    }
                                ]
                            },
                            {
                                title: "考勤申诉",
                                route: "/fjAttend-appeal"
                            },
                            {
                                title: "考勤配置",
                                route: "/fjAttend-configure"
                            },
                            {
                                title: "排班管理",
                                route: "/fjAttend-work-manage"
                            }
                        ]
                    },
                    {
                        title: "工作日志",
                        url: "../ccc/ccc.html"
                    }
                ]
            } */
        ];
        //
        window["zzSideMenu"+this.xh] = new zzSideMenu({
            treeData: this.menuData, //导航栏数据
            //treeData:navData, // --- 测试用
            itemClickAfter: function(data) {
                //对应导航栏子项的点击事件
                //console.log(data);
                //
                var tempNavData = this.getMatchedItemsByIndex(data.index);
                console.log("---getMatchedItemsByIndex---", tempNavData);
                // 传出路径导航的数据
                //vm.$emit("getnavbardata",tempNavData);
                //
                document.title = data.title;
                //
                var url = data[this.settings.tabName];
                // --- 与tab栏对应
                //this.tabBarObj = window[this.settings.tabBarName+this.settings.xh];
                //if(!this.tabBarObj)return false;
                this.tabBarObj.tabAdd({
                    url:url,
                    title:data.title,
                    noOpenMenuItem:true
                });
                // --- 计算tabList的滑动距离
                this.tabBarObj.calcTabListSlideInfo();
                // --- tabList滑动到当前显示的tabitem
                this.tabBarObj.tabListSlideByCur();
                // --- 地址栏对应路径
                this.refreshLocationHref(url);
            },
            itemIconChange: function(item, data, isActive) {
                //alert(isActive);
                //icon
                var icon = item.children(this.settings.iconClass);
                var otherIcons = item
                    .siblings(this.settings.itemClass)
                    .children(this.settings.iconClass);
                for (var i = 0, len = otherIcons.length; i < len; i++) {
                    this.clearIconSrc(otherIcons.eq(i));
                }!isActive
                    ?
                    icon.attr("src", data[this.settings.activeIconSrc] || this.common.activeIconSrcLink) :
                    icon.attr("src", data[this.settings.iconSrc] || this.common.iconSrcLink);
            },
            itemArrowChange: function(item, data, isActive) {
                //arrow
                var otherItems = item.siblings(this.settings.itemClass);
                var arrow = item.children(this.settings.arrowClass);
                var otherArrows = otherItems.children(this.settings.arrowClass);
                //
                //otherItems.removeClass("is-noHC");
                for (var i = 0, len = otherArrows.length; i < len; i++) {
                    this.clearArrowSrc(otherArrows.eq(i));
                    otherArrows.eq(i).removeClass("open");
                }
                if (!data.children || !data.children.length) {
                    !isActive
                        ?
                        arrow.attr("src", data[this.settings.activeArrowSrc]) :
                        arrow.attr("src", data[this.settings.arrowSrc]);
                    //!isActive ? item.addClass("is-noHC") : item.removeClass("is-noHC");
                } else {
                    !isActive
                        ?
                        arrow.addClass("open") :
                        arrow.removeClass("open");
                }
            },
            settings: {
                xh:this.xh,
                tabName:"url"  // 链接地址
                /* hasIcon: true, //是否有icon图标
                iconSrc: "iconSrc", //图标链接在导航数据中的字段名
                activeIconSrc: "activeIconSrc", //选中时的图标链接字段名
                hasArrow: true, //是否有箭头
                arrowSrc: "arrowSrc", //箭头图标链接在导航数据中的字段名
                activeArrowSrc: "activeArrowSrc" //选中时的箭头链接字段名 */
            }
        });
        //
        window["zzSideMenu"+this.xh].init();
    }
});